<template>
  <div class="infoshow">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">
        <div class="user">
          <img src="../assets/logo.png" alt="" />
        </div>
      </el-col>
      <el-col :span="16">
        <div class="userinfo">
          <el-form :inline="true">
            <el-form-item class="btnRight">
              <el-button type="primary" size="small" icon="view" @click="dialog"
                >修改</el-button
              >
            </el-form-item>
          </el-form>
          <div class="useritem">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenben"></use>
            </svg>
            <span>{{ user.name ? user.name : "请填写姓名" }}</span>
          </div>
          <div class="useritem">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-huiyuandenglu"></use>
            </svg>
            <span>{{ user.identity == "employee" ? "用户" : "管理员" }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="dialog">
      <el-dialog title="修改个人信息" :visible.sync="dialogShow" :close-on-click-modal="false" :modal-append-to-body="false">
        <el-form
          label-width="100px"
          :model="form"
          style="width: 670px"
          :rules="rules"
          ref="form"
        >
          <el-form-item label="姓名:" prop="name">
            <el-input
              type="text"
              v-model="form.name"
              :placeholder="user.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:" prop="checkPassword">
            <el-input type="password" v-model="form.checkPassword"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="editUser('form')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import jwt_decode from "jwt-decode";
export default {
  name: "InfoShow",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      }else {
        callback();
      }
    };
    return {
      dialogShow: false,
      // user:{
      //   name:"",
      //   identity:"",
      // },
      form: {
        name: "",
        password: "",
        checkPassword: "",
      },
      rules: {
        name: [
          { required: false, message: "用户名不能为空", trigger: "change" },
          { min: 2,max: 6,message: "长度在 2 到 6 个字符",trigger: "blur"},
        ],
        password: [
          { min: 8, max: 12, message: "长度在 8 到 12 个字符", trigger: "blur" },
        ],
        checkPassword: [
          { min: 8, max: 12, message: "长度在 8 到 12 个字符", trigger: "blur" },
          { validator: validatePass2, triggle: "blur" }
        ],
      },
    };
  },
  created() {
    //   this.$axios.get(`/api/users/current?Authorization=${localStorage.userToken}`).then(res => {
    //     this.user.name = res.data.name;
    //     this.user.identity = res.data.identity;
    //   })
    //   console.log(localStorage.userName);
    // console.log(this.$refs[form]);
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    dialog() {
      this.dialogShow = true;
    },
    editUser(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          let id = this.$store.getters.user.id;
          console.log(this.form.name);
          let name = this.form.name;
          this.$axios
            .post(`/api/users/edituser/${id}`, this.form)
            .then((res) => {
              this.$message({
                message: "修改成功,请重新登录",
                type: "success",
              });
              this.$router.push("./login");
              localStorage.removeItem("userToken");
              // this.$store.commit("updateName",this.form.name)
            })
            .catch((err) => console.log(err));
          this.dialogShow = false;
        } else {
          this.$message({
            message: "格式不正确请重新输入!",
            type: "error",
          });
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
@import url("../../node_modules/element-ui/lib/theme-chalk/index.css");
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-right: 5px;
}
.infoshow {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* padding: 16px; */
}
.row-bg {
  width: 100%;
  height: 100%;
}
.user {
  text-align: center;
  position: relative;
  top: 50%;
  margin-top: -40%;
}
.userinfo {
  height: 100%;
  background-color: #eee;
}
.useritem {
  position: relative;
  top: 25%;
  padding: 26px;
  font-size: 26px;
  color: #333;
}
.btnRight {
  float: right;
  margin: 10px;
}
</style>